<template>
  <div class="page">
    <el-tabs v-if="flag" ref="specialOriented" v-model="activeName" type="card">
      <el-tab-pane v-if="$hasTabPermission(10020301)" label="客户导向模式" name="first">
        <cmsOrientedMode ref="cmsOrientedMode" :export-domain="exportDomain" :org-tree-data="orgTreeData" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(10020302)" lazy label="商品导向模式" name="second">
        <shopOrientedMode ref="shopOrientedMode" :export-domain="exportDomain" :goods-tree-data="goodsTreeData" :org-tree-data="orgTreeData" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(10020303)" lazy label="审批模式" name="third">
        <auditMode ref="auditMode" :export-domain="exportDomain" :goods-tree-data="goodsTreeData" :org-tree-data="orgTreeData" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(10020304)" lazy label="特价关键字" name="fourth">
        <key ref="key" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(10020305)" lazy label="大车司机导向模式" name="fiveth">
        <cartDriver ref="cartDriver" :price-status-map="priceStatusMap" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(10020306)" lazy label="大车用户导向模式" name="sixth">
        <cartDriverUser ref="cartDriverUser" :price-status-map="priceStatusMap" />
      </el-tab-pane>
      <!-- <el-tab-pane lazy label="电子围栏导向模式" name="seventh">
        <carElectronicFence ref="carElectronicFence" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { queryMap, goodsTypeQueryList } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  export default {
    name: 'specialOrientedMode',
    components: {
      cmsOrientedMode: require('./components/cmsOrientedMode').default,
      key: require('./components/key').default,
      shopOrientedMode: require('./components/shopOrientedMode').default,
      auditMode: require('./components/auditMode').default,
      cartDriver: require('./components/cartDriver').default,
      cartDriverUser: require('./components/cartDriverUser').default
      // carElectronicFence: require('./components/carElectronicFence').default
    },
    data() {
      return {
        activeName: 'first',
        flag: false,
        goodsTreeData: [],
        orgTreeData: []
      }
    },
    computed: {
      ...mapGetters([
        'orgList', 'exportDomain'
      ])
    },
    async created() {
      await this.getGoodsTreeData()
      await this.getOrgTreeData()
      await this.queryOptionsMap()
      this.flag = true
    },
    mounted() {
      this.activeName = this.$refs.specialOriented.panes[0].name
    },
    methods: {
      // 查询枚举
      async queryOptionsMap() {
        const [res] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'PriceStatusEnum' })
        ])
        this.priceStatusMap = res.data // 报价状态
      },
      // 获取所属机构数据
      async getOrgTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.orgTreeData = getTreeData(data)
      },
      // 获取商品分类树
      async getGoodsTreeData() {
        const res = await goodsTypeQueryList({})
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.goodsTreeData = getTreeData(data, 'parentId', 'gtId')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    height: 100%;
    .el-tabs {
      height: 100%;
      /deep/ .el-tabs__content {
        height: calc(100% - 56px);
      }
      /deep/ .el-tab-pane {
        height: 100%;
      }
    }
  }
</style>
